<template>
  <van-form @submit="onSubmit">
    <!-- 文章标题 -->
    <van-field
      v-model="username"
      name="title"
      label="文章标题"
      placeholder="请输入文章内容"
      :rules="[{ required: true, message: '请输入文章内容' }]"
    />
    <!-- 文章分类 -->
    <van-field
      readonly
      clickable
      name="cateid"
      :value="value"
      label="文章分类"
      placeholder="请选择文章分类"
      :rules="[{ required: true, message: '请选择文章分类' }]"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
      readonly
      clickable
      name="tags"
      :value="value2"
      label="文章标签"
      placeholder="请选择文章标签"
      :rules="[{ required: true, message: '请选择文章标签' }]"
      @click="showPicker2 = true"
    />
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
        show-toolbar
        :columns="allTag"
        @confirm="onConfirm1"
        @cancel="showPicker2 = false"
      />
    </van-popup>
    <van-field  name="uploader"  label="文件上传">
      <template #input>
        <van-uploader  v-model="fileList" :after-read="afterRead" />
      </template>
    </van-field>
    <van-field
      v-model="message"
      rows="4"
      autosize
      label="文章正文"
      type="textarea"
      placeholder="请输入正文内容"
      :rules="[{ required: true, message: '请输入正文内容' }]"
    />
    <br /><br />
    <van-row v-if="!isCheck" type="flex" justify="space-around">
      <van-button icon="plus" type="primary" @click="myArticle('2')">发布</van-button>
      <van-button icon="send-gift-o" type="info" @click="myArticle('1')">存草稿</van-button>
      <van-button icon="revoke" type="danger" @click="reset">重置</van-button>
    </van-row>
     <van-row v-else type="flex" justify="space-around">
      <van-button icon="send-gift-o" type="info" @click="myArticle('1')">存草稿</van-button>
      <van-button icon="send-gift-o" type="warning" @click="updateArticle" to="/user">修改文章</van-button>
      <van-button icon="revoke" type="danger" @click="reset">重置</van-button>
    </van-row>
  </van-form>
</template>

<script>
import request from '@/utils/request'
import { getImg } from '@/api/article'
import { Toast } from 'vant'
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    isCheck: {
      type: Boolean
    },
    cateId: {
      type: Number
    }
  },
  data () {
    return {
      username: '',
      value: '',
      value2: '',
      columns: [],
      showPicker: false,
      showPicker2: false,
      checkboxGroup: [],
      message: '',
      allTag: [],
      newid: '',
      newCate: [],
      uploader: '',
      fileList: []
    }
  },
  async created () {
    const res = await request.get('/index/index')
    // !数据回显
    this.username = this.item.title
    this.value2 = this.item.tags
    this.value = this.item.catename
    this.message = this.item.content

    // 标签名
    this.allTag = res.data.allTag.map((item) => item.tagname)

    // 分类名
    this.columns = res.data.allCate.map((item) => item.catename)
    this.newCate = res.data.allCate
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    onConfirm1 (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    // ! 获取图片信息
    async afterRead (file) {
      const fd = new FormData()
      fd.append('file', file.file)
      const res = await getImg(fd)
      this.uploader = res.data.savePath
    },
    async onSubmit () {
    },
    async myArticle (type) {
      // ! 获取分类id
      this.newCate.forEach(item => {
        if (item.catename === this.value) {
          this.newid = item.id
        }
      })
      await request.post('/user/addArticle', {
        title: this.username,
        author: this.username,
        cateid: this.newid,
        tags: this.value2,
        pic: this.uploader,
        content: this.message,
        status: type
      })
      this.reset()
      Toast.success('添加成功')
    },
    // ! 修改文章
    async updateArticle (type) {
      await request.post('/user/editArticle', {
        title: this.username,
        author: this.username,
        cateid: this.cateId,
        id: this.item.id,
        content: this.message,
        status: type,
        tags: this.value2,
        pic: this.uploader
      })
      this.reset()
      Toast.success('修改成功')
    },
    // ! 重置功能
    reset () {
      this.username = ''
      this.value2 = ''
      this.value = ''
      this.message = ''
    }
  }
}
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>
